import React, { Component } from 'react';
import { inject, observer } from 'mobx-react';
import { routingStore, caseStore } from '../../stores/index';
import GraphDataStore from '../../stores/GraphDataStore';
import ComponentStore from '../../stores/ComponentStore';
import CaseStore, { HotEventDataTable } from '../../stores/CaseStore';

import { hotSelections } from '../../utils/common';

import { Table } from 'antd';
import DataPicker from '../../component/data_picker/DataPicker';
import Graph from '../../component/graph/graph';
import './Monitor.scss';

import {
  SelectionType,
  subStationSelections,
  dateSelections,
  dateIntervalSelections
} from '../../utils/common';

const echarts = require('echarts');
require('echarts-wordcloud');

export interface MonitorProps {
  graphStore: GraphDataStore;
  componentStore: ComponentStore;
  caseStore: CaseStore;
}

const hotEventColumns = [
  {
    dataIndex: 'title',
    key: 'title',
    render: (text: string, record: string, index: number) => {
      return (
        <div className={index !== 0 ? 'type-name' : 'type-title'}>
          {text}
        </div>
      );
    }
  },
  {
    dataIndex: 'info',
    key: 'info',
    render: (text: string, record: string, index: number) => {
      return (
        <div className={index !== 0 ? 'type-name' : 'type-title'}>
          {text}
        </div>
      );
    }

  },
  {
    dataIndex: 'detail',
    key: 'detail',
    render: (text: string, record: HotEventDataTable, index: number) => {
      return (
        index !== 0 ?
          (
            <div
              className="hot-details"
              onClick={() => {
                routingStore.push('/hot_event_details');
                caseStore.setCaseListCategory(record.title);
              }}
            >查看
            </div>
          ) : <div className="type-title">详情</div>);
    }
  }
];

// 热点
@inject('graphStore', 'componentStore', 'caseStore')
@observer
export default class Monitor extends Component<MonitorProps> {
  componentWillMount(): void {
    this.props.graphStore.getHotwordData();
    this.props.caseStore.getHotEventDataList();
    this.props.graphStore.getRequestTopTenData();
  }
  componentDidMount(): void {
    const hotWord = echarts.init(window.document.getElementById('hotword'));
    hotWord.setOption({
      series: [{
        type: 'wordCloud',
        shape: 'circle',
        left: 'center',
        top: 'center',
        width: '70%',
        height: '80%',
        right: null,
        bottom: null,
        sizeRange: [12, 60],
        rotationRange: [-90, 90],
        rotationStep: 45,
        gridSize: 8,
        drawOutOfBound: false,
        textStyle: {
          normal: {
            fontFamily: 'sans-serif',
            fontWeight: 'bold',
            color: function () {
              return 'rgb(' + [
                Math.round(Math.random() * 160),
                Math.round(Math.random() * 160),
                Math.round(Math.random() * 160)
              ].join(',') + ')';
            }
          },
          emphasis: {
            shadowBlur: 10,
            shadowColor: '#333'
          }
        },
        data: this.props.graphStore.hotWordsData
      }]
    });
  }
  render(): JSX.Element {
    const Selections: SelectionType[][][] = [dateSelections, dateIntervalSelections, subStationSelections];
    const { caseStore, graphStore } = this.props;
    const hotEventDataSource = caseStore.HotEventDataList;
    const hotGraph = {
      data: graphStore.hotRequestData,
      containerId: 'hotRequestTopTenGraph',
      graphType: 'dataBar',
      graphTitle: '热点诉求统计TOP10',
      graphSelections: [hotSelections]
    };
    return (
      <div className="monitor-container">
        <div className="case-header">
          {
            Selections.map(
              (v: SelectionType[][], index: number) => (
                <DataPicker
                  className="picker-class"
                  graphSelections={v}
                  isCascade={false}
                  key={index}
                  pickerType={v[0][0].label !== 'date'}
                />
              ))
          }
        </div>
        <div className="monitor-sub-container">
          <div className="hot-word">
            <div className="header">
              <span className="hot-icon">
                <span className="title-font">热词</span>
              </span>
            </div>
            <div className="line" />
            <div className="hot-body">
              <div id="hotword" className="hot-word-cloud" />
            </div>
          </div>
          <div className="hot-panel">
            <div className="header">
              <span className="hot-icon">
                <span className="title-font">热事件</span>
              </span>
            </div>
            <div className="line" />
            <div className="hot-body">
              <Table
                dataSource={hotEventDataSource}
                columns={hotEventColumns}
                bordered={true}
                pagination={false}
                showHeader={false}
              />
            </div>
          </div>
          <div className="hot-panel">
            <div className="hot-graph-header">
              <span className="title-font">热点诉求top10</span>
              <span
                onClick={() => {
                  routingStore.push('/hot_top_ten_table');
                }}
              >详情
              </span>
            </div>
            <div className="line" />
            <div className="hot-graph">
              <Graph
                graphProps={hotGraph}
              />
            </div>
          </div>
        </div>
      </div>
    );
  }
}